<style scoped>
  .buttonMenu {
    position: relative;
    float: left;
  }

</style>

<template>
  <div>
    <Button style="float: left; margin-right: 8px" icon="ios-add" type="primary" shape="circle"
      @click="modal1 = true">添加课程</Button>
    <!-- 添加课程弹窗 -->
    <Modal v-model="modal1" title="录入课程基本信息" @on-ok="addCourse(course)" :styles="{top: '10px'}" width="700" scrollable>
      <div>
        <courseinfo @getCourse='getCourse' :key="new Date().getTime()"></courseinfo>
      </div>
    </Modal>
    <Button style="float: left; margin-right: 8px;color: #fff;background-color:gray;border-color: gray"
      icon="ios-book-outline" shape="circle" @click="initmodal2(modifybook)">指定课程教材</Button>
    <!-- 指定教材弹窗 -->
    <Modal v-model="modal2" title="指定课程教材" @on-ok="modifytextbook(modifybook)" width=380 scrollable>
      <div>
        课程:&nbsp;
        <Select v-model="modifybook.courseId" style="width: 300px" filterable>
          <Option v-for="item in courseList" :value="item.csId" :key="item.csId">{{ item.csName }}
          </Option>
        </Select>
        <br><br>
        教材:&nbsp;
        <Select v-model="modifybook.textbookId" style="width: 300px" filterable>
          <Option v-for="item in textbookList" :value="item.tbIsbn" :key="item.tbIsbn" :label="item.tbIsbn">
            <span>{{item.tbName}}</span>
            <span style="float:right;color:#808695">{{item.tbIsbn}}</span>
          </Option>
        </Select>
      </div>
    </Modal>
    <Button @click="initmodal3(relation)" style="margin-right: 8px; float: left;" type="warning" icon="ios-settings"
      shape="circle">
      设置理论实践对应关系</Button>
    <!-- 设置关系弹窗  -->
    <Modal v-model="modal3" title="设置理论实践对应关系" @on-ok="setRelation(relation)" width=330 scrollable>
      <div>
        计划版本:&nbsp;
        <Select v-model="relation.versionId" style="width: 300px" filterable @on-change="postmvId">
          <Option v-for="item in mvIdList" :value="item.mvId" :key="item.mvId" :label="item.mvId">
            <span>{{item.mvName}}</span>
            <span style="float:right;color:#808695">{{item.mvId}}</span>
          </Option>
        </Select>
        <br><br>
        理论课程:&nbsp;
        <Select v-model="relation.theorycourseId" style="width: 300px" filterable>
          <Option v-for="item in theorycourseList" :value="item.csId" :key="item.csId">{{ item.csName }}
          </Option>
        </Select>
        <br><br>
        实践课程:&nbsp;
        <Select v-model="relation.practicalcourseId" style="width: 300px" filterable>
          <Option v-for="item in practicalcourseList" :value="item.csId" :key="item.csId">{{item.csName}}
          </Option>
        </Select>
      </div>
    </Modal>
    <Button @click="Active(selected)" style="margin-right: 8px; float: left;" type="info" shape="circle">
      <Icon size="18" type="ios-checkmark" />启用</Button>
    <Button @click="Stop(selected)" style="margin-right: 8px; float: left;" type="error" shape="circle">
      <Icon size="18" type="ios-close" />停用</Button>
    <br><br><br>
    <div>
      <Table border :columns="columnshead" :data="datat" @on-selection-change="Selected"></Table>
    </div>
    <br>
    <div>
      <div class="buttonMenu">
        <Upload ref="upload" :action="$host + '/course/management/importCourseExcel'">
          <Button style="margin-right: 8px;" type="success">
            <Icon size="18" type="ios-cloud-upload-outline" />导入</Button>
        </Upload>
      </div>
      <div class="buttonMenu">
        <Button style="margin-right: 8px">
          <Icon size="18" type="ios-download-outline" />
          <a :href="$host + '/course/management/exportExcel'" style="color: #515A6E">导出</a></Button>
      </div>
    </div>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  import courseinfo from './CourseInfo.vue'
  export default {
    components: {
      courseinfo
    },
    data() {
      return {
        columnshead: [{
            type: 'selection',
            width: 60,
            align: 'center',
            fixed: 'left'
          },
          {
            title: '课程编码',
            key: 'csId',
            width: 150
          },
          {
            title: '国家课程代码',
            key: 'ncId',
            width: 150
          },
          {
            title: '课程名称',
            key: 'csName',
            width: 150
          },
          {
            title: '课程说明',
            key: 'csIntro',
            width: 150
          },
          {
            title: '试题来源',
            key: 'csTqsource',
            width: 150
          },
          {
            title: '课程状态',
            key: 'csState',
            width: 150
          },
          {
            title: '学分',
            key: 'csCredit',
            width: 150
          },
          {
            title: '合格线',
            key: 'csPassline',
            width: 150
          },
          {
            title: '记分制',
            key: 'csPointsys',
            width: 150
          },
          {
            title: '主观题分数',
            key: 'csSqmark',
            width: 150
          },
          {
            title: '客观题分数',
            key: 'csOqmark',
            width: 150
          },
          {
            title: '总分',
            key: 'csTotalmark',
            width: 150
          },
          {
            title: '考试时间',
            key: 'csExamtime',
            width: 150
          },
          {
            title: '是否过程性考核',
            key: 'csIfpa',
            width: 150
          },
          {
            title: '课程性质',
            key: 'csProperties',
            width: 150
          },
          {
            title: '备注',
            key: 'csRemark',
            width: 150
          },
          {
            title: '教材国际书号',
            key: 'tbIsbn',
            width: 150
          },
          {
            title: '计划版本',
            key: 'mvId',
            width: 150
          }
        ],
        datat: [],
        total: 1,
        current: 1,
        selected: [],
        course: {},
        modal1: false,
        modal2: false,
        modal3: false,
        modifybook: {},
        relation: {},
        courseList: [],
        textbookList: [],
        mvIdList: [],
        theorycourseList: [],
        practicalcourseList: []

      }
    },
    created() {
      this.$axios.get(this.$host + '/course/management/allCourses?pageNum=1&pageSize=10').then(res => {
        this.total = res.data.data.total
        this.datat = res.data.data.list
      })
      this.$axios.get(this.$host + '/course/management/allCourses?pageNum=1&pageSize=9999').then(res => {
        this.courseList = res.data.data.list
      })
      this.$axios.get(this.$host + '/course/management/allTextbooks?pageNum=1&pageSize=9999').then(res => {
        this.textbookList = res.data.data.list
      })
      this.$axios.get(this.$host + '/professional/plan/majorVersions?pageNum=1&&pageSize=99999').then(res => {
        this.mvIdList = res.data.data.list
      })
    },
    methods: {
      changePage(currentPage) {
        this.$axios.get(this.$host + '/course/management/allCourses?pageNum=' + currentPage + '&&pageSize=10').then(
          res => {
            this.datat = res.data.data.list
            this.current = currentPage
          })
      },
      initmodal2(modifybook) {
        this.modal2 = true
        for (var key in modifybook) {
          this.$delete(modifybook, key)
        }
      },
      initmodal3(relation) {
        this.modal3 = true
        for (var key in relation) {
          this.$delete(relation, key)
        }
      },
      modifytextbook(modifybook) {
        this.$axios.post(this.$host + '/course/management/designatedTextbook', modifybook).then(res => {
          if (res.data.message == '为课程指定教材成功') {
            this.$Message.success('指定教材成功')
            this.$axios.get(this.$host + '/course/management/allCourses?pageNum=' + this.current + '&&pageSize=10')
              .then(res => {
                this.datat = res.data.data.list
              })
          } else
            this.$Message.error('指定教材失败')
        })
      },
      getCourse(course) {
        this.course = course
      },
      addCourse(course) {
        this.$axios.post(this.$host + '/course/management/newCourse', course).then(res => {
          if (res.data.message == '增加课程成功') {
            this.$Message.success('添加课程成功')
            if (this.datat.length == 10) {
              this.datat.pop()
            }
            var obj = course //解决相同对象覆盖问题
            this.datat.unshift(obj)
            this.total++
          } else
            this.$Message.error('添加课程失败')
        })
      },
      postmvId(mvId) {
        this.$axios.get(this.$host + '/course/management/allPracticalOrTheoreticalCourse?mvId=' + mvId +
          '&&pageNum=1&&pageSize=9999&&property=理论').then(res => {
          this.theorycourseList = res.data.data.list
        })
        this.$axios.get(this.$host + '/course/management/allPracticalOrTheoreticalCourse?mvId=' + mvId +
          '&&pageNum=1&&pageSize=9999&&property=实践').then(res => {
          this.practicalcourseList = res.data.data.list
        })
      },
      setRelation(relation) {
        console.log(relation)
        var postrelation = []
        postrelation.push(relation)
        this.$axios.post(this.$host + '/course/management/CourseCorrespondingRelation', postrelation).then(res => {
          console.log(res)
        })
      },
      Selected(selection) {
        this.selected = selection
      },
      Active(selected) {
        var record = 0
        var postchange = []
        for (var i in selected) {
          postchange.push({
            courseId: selected[i].csId,
            courseState: '正常'
          })
          record++
        }
        this.$axios.post(this.$host + '/course/management/courseState', {
          jsonArray: postchange
        }).then(res => {
          if (res.data.message.substr(0, 4) == '成功修改') {
            this.$Notice.success({
              title: '启用成功',
              desc: '成功启用' + record + '个课程'
            });
            this.$axios.get(this.$host + '/course/management/allCourses?pageNum=' + this.current + '&&pageSize=10')
              .then(res => {
                this.datat = res.data.data.list
              })
          } else {
            this.$Notice.error({
              title: '启用失败',
              desc: ''
            })
          }
        })
      },
      Stop(selected) {
        var record = 0
        var postchange = []
        for (var i in selected) {
          postchange.push({
            courseId: selected[i].csId,
            courseState: '注销'
          })
          record++
        }
        this.$axios.post(this.$host + '/course/management/courseState', {
          jsonArray: postchange
        }).then(res => {
          if (res.data.message.substr(0, 4) == '成功修改') {
            this.$Notice.success({
              title: '停用成功',
              desc: '成功注销' + record + '个课程'
            });
            this.$axios.get(this.$host + '/course/management/allCourses?pageNum=' + this.current + '&&pageSize=10')
              .then(res => {
                this.datat = res.data.data.list
              })
          } else {
            this.$Notice.error({
              title: '启用失败',
              desc: ''
            })
          }
        })
      }
    }
  }

</script>
